<template>
  <div class="login-wrapper">
    <mt-header fixed title="登录"></mt-header>
    <div class="logo"></div>
    <div class="login-form">
      <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    </div>
    <div class="buttons">
      <mt-button type="primary" size="large" @click="login">登录</mt-button>
    </div>
  </div>
</template>

<script>
import service from '../services'

export default{
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      if (this.username.length === 0) {
        service.Toast('请输入用户名')
        return
      }
      if (this.password.length === 0) {
        service.Toast('请输入密码')
        return
      }

      service.login({
        username: this.username,
        password: this.password
      }).then((rep) => {
        if (rep.data.code !== 100) {
          service.Toast(rep.data.msg)
        } else {
          this.$router.push('/index')
        }
      }, () => {
        service.Toast('网络故障，请稍候再试')
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../assets/scss/common.scss';
.login-wrapper {
  height: 100%;
  .logo{
    height: px2rem(100);
    margin-top: px2rem(60);
    background: url('../assets/images/logo.png') no-repeat center center;
    background-size: px2rem(408) px2rem(116);
  }
  .login-form{
    width: px2rem(600);
    margin: px2rem(100) auto 0 auto;
  }
  .buttons{
    width: px2rem(600);
    margin: px2rem(50) auto 0 auto;
    text-align: center;
  }
}
</style>
